<template>
  <div class="attribute">
    <div class="btn-ctrl">
      <button class="btn" @click="changeText">运行</button>
    </div>
    <!-- <textarea class="textarea-attr" v-model="test"></textarea> -->
    <textarea class="textarea-attr" v-model="attr"></textarea>

  </div>
</template>

<script>
import { ref } from 'vue';
export default {
    // props: {
    //   list: {
    //     type: Array,
    //     default: function() {
    //       return []
    //     }
    //   }
    // },
    props: ['list'],
    // emits: ['update:list'],
    setup(props) {
        let attr = ref(JSON.stringify(props.list))
        // 文本处理
        let index = ref(0); // 缩进标记
        let number = ref(1); // 行数
        function textHandler(symbol) {
            let str = '';
            switch (symbol) {
            case '[':
            case '{':
                index.value++;
                break;
            case '}':
            case ']':
                index.value--;
                str = '\t\n' + '|-' + ++number.value + '\t'
                for (let i = 0; i < index.value; i++) {
                    str += '\t'
                }
                str += symbol
                return str
            }
            str = symbol + '\t\n' + '|-' + ++number.value + '\t'
            for (let i = 0; i < index.value; i++) {
                str += '\t'
            }
            return str;
        }
        return {
            attr,
            textHandler,
            index,
            number
        }
    },
    watch: {
        list: {
            handler(v) {
                let reg = /(\[|,|{|}|\])/g
                this.index = 0;
                this.number = 1;
                this.attr = '|-' + this.number + '\t' + JSON.stringify(v)
                this.attr = this.attr.replace(reg, ($0) => {
                    // console.log($0 + '\n' + this.textHandler($0))
                    return this.textHandler($0)
                })
                // console.log('tt', this.attr)
                // this.attr = v
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        changeText() {
            // let reg = /[\t|\n|-]/g;
            let reg = /\|-\d{1,}(?=\t)/g;
            let temp = this.attr.replace(reg, '')
            // console.log('temp', temp)
            this.$emit('update:list', JSON.parse(temp))
            // console.log(this.attr)
            // this.$emit('update:list', JSON.parse(this.attr))
        }
    },
    mounted() {}
}
</script>

<style scoped lang="less">
  .attribute {
    height: calc(~"100% - 0px");
    // background: rgba(0, 0, 0, .8);
    .textarea-attr {
      width: 100%;
      height: calc(~"100% - 50px");
      font-size: 17px;
      line-height: 28px;
      white-space: 1px;
      font-family: "宋体 微软雅黑";
      background: rgba(53, 53, 53, 1.0);
      color: #aaaaff;
      padding: 10px;
      box-sizing: border-box;
    }
    .btn-ctrl {
      padding: 15px;
      .btn {
        cursor: pointer;
        // color: #fff;
      }
    }
  }
</style>
